<template>
  <el-container v-bind:style="{height: height}">
    <el-aside width="200px" v-bind:style="{height: height, backgroundColor: 'white', borderRight: 'solid 1px #eee'}">
      <div style="height: 60px; width: 199px; border-right: solid 1px #eee}"></div>
      <el-menu :default-openeds="['1']" style="border-right: solid 0px #eee;">
        <!--<el-submenu index="1">-->
          <!--<template slot="title"><i class="el-icon-message"></i>Api</template>-->
          <!--<el-menu-item-group>-->
            <!--<template slot="title">分组一</template>-->
            <!--<el-menu-item index="1-1">选项1</el-menu-item>-->
            <!--<el-menu-item index="1-2">选项2</el-menu-item>-->
          <!--</el-menu-item-group>-->
          <!--<el-menu-item-group title="分组2">-->
            <!--<el-menu-item index="1-3">选项3</el-menu-item>-->
          <!--</el-menu-item-group>-->
          <!--<el-submenu index="1-4">-->
            <!--<template slot="title">选项4</template>-->
            <!--<el-menu-item index="1-4-1">选项4-1</el-menu-item>-->
          <!--</el-submenu>-->
        <!--</el-submenu>-->
        <!--<el-submenu index="2">-->
          <!--<template slot="title"><i class="el-icon-menu"></i>导航二</template>-->
          <!--<el-menu-item-group>-->
            <!--<template slot="title">分组一</template>-->
            <!--<el-menu-item index="2-1">选项1</el-menu-item>-->
            <!--<el-menu-item index="2-2">选项2</el-menu-item>-->
          <!--</el-menu-item-group>-->
          <!--<el-menu-item-group title="分组2">-->
            <!--<el-menu-item index="2-3">选项3</el-menu-item>-->
          <!--</el-menu-item-group>-->
          <!--<el-submenu index="2-4">-->
            <!--<template slot="title">选项4</template>-->
            <!--<el-menu-item index="2-4-1">选项4-1</el-menu-item>-->
          <!--</el-submenu>-->
        <!--</el-submenu>-->
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-setting"></i>系统设置</template>
          <el-menu-item-group>
            <router-link to="/project"><el-menu-item index="1-1"> 项目管理</el-menu-item></router-link>
            <!--<el-menu-item index="1-2">选项2</el-menu-item>-->
          </el-menu-item-group>
          <!--<el-menu-item-group title="分组2">-->
            <!--<el-menu-item index="1-3">选项3</el-menu-item>-->
          <!--</el-menu-item-group>-->
          <!--<el-submenu index="1-4">-->
            <!--<template slot="title">选项4</template>-->
            <!--<el-menu-item index="1-4-1">选项4-1</el-menu-item>-->
          <!--</el-submenu>-->
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px; background-color: #3d4e5f; color: white;">
        <el-dropdown style="color: white;">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>Admin</span>
      </el-header>

      <el-main>
        <div id="app">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
    <el-dialog
            title="提示"
            :visible="$store.getters.dialogStatus"
            width="30%"
            @close="$store.dispatch('hideDialog')">
      <span>{{$store.getters.dialogMessage}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$store.dispatch('hideDialog')">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<style>
  body {
    margin: 0px;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
    font-weight: 400;
    color: #5e6d82;
  }
  a {
    text-decoration: none;
    color: #303133;
  }
  .el-header {
    background-color: red;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    mounted () {
      let self = this
      window.onresize = function () {
        self.height = window.innerHeight + 'px'
      }
    },
    data () {
      var height = window.innerHeight + 'px'
      return {
        height: height
      }
    }
  }
</script>